<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐</title>

    <!-- 主体样式 -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            height: 100%;
            overflow: hidden;
        }
        
        iframe {
            overflow: hidden;
            display: block;
            position: absolute;
            float: left;
            right: 0;
            height: 560px;
            /* 477px */
            width: 110%;
        }
        
        .box {
            text-align: center;
        }
        
        dl {
            display: inline-block;
        }
        
        a {
            font-size: 22px;
            color: #5e2d00;
            padding: 10px;
        }
        
        nav a:link a:visited {
            text-decoration: none;
            display: inline-block;
        }
        
        nav a:hover nav a:active {
            text-decoration: underline;
            color: red;
        }
        
         :target {
            display: inline-block;
        }
        
        span {
            color: red;
        }
    </style>

    <!-- 隐藏框样式 -->
    <style>
        #container {
            height: 20px;
            border: 1px solid #5e2d00;
            background: lightblue;
            text-align: center;
            cursor: pointer;
            position: fixed;
            width: 100%;
            z-index: 1;
            /* 确保显示在最上层 */
        }
        
        #frame {
            position: relative;
            background-color: lightblue;
            display: none;
            border: 1px solid #5e2d00;
            padding: 1px;
            text-align: center;
            z-index: 1;
        }
        
        #links a {
            display: inline-block;
            margin-bottom: 5px;
        }
    </style>


</head>

<body>
    <div id="container">V
        <div id="frame">
            <div id="links">
                <!-- <hr size="3" color="#5e2d00" width="100%"> -->
                <nav>
                    <a href="#new1" onclick="toggleBlocks('1')">music</a>
                    <a href="#new2" onclick="toggleBlocks('2')">待开发</a>
                </nav>
                <!-- <hr size="3" color="#5e2d00" width="100%"> -->
            </div>
        </div>
    </div>

    <div class="interact_block">
        <div class="colunm" id="colunm">
            <div id="content" class="box">


                <dl id="new1" class="new1">
                    <iframe src="music.html" frameborder="0"></iframe>
                </dl>
                <dl id="new2" class="new2" style="display: none;">
                    <p style="position: absolute;">待开发</p>
                </dl>
            </div>
        </div>
    </div>

    <!-- 页面链接切换 -->
    <script>
        function toggleBlocks(page) {
            var block1 = document.getElementById("new1");
            var block2 = document.getElementById("new2");

            if (block1.style.display === "none" && page === '1') {
                block1.style.display = "inline-block";
                block2.style.display = "none";
            } else if (block2.style.display === "none" && page === '2') {
                block1.style.display = "none";
                block2.style.display = "inline-block";
            }
        }
    </script>

    <!-- 隐藏框js -->
    <script>
        var container = document.getElementById('container');
        var frame = document.getElementById('frame');

        container.addEventListener('mouseenter', function() {
            frame.style.display = 'block';
        });

        container.addEventListener('mouseleave', function() {
            frame.style.display = 'none';
        });
    </script>
</body>

</html>